<template>
  <div class="page Order">
    <van-tabs v-model="search.orderStatus" @change="searchFunc" color="#517df1" title-active-color="#517df1" title-inactive-color="#9d9d9d">
      <van-tab v-for="(item, index) in showOrderStatus" :key="index" :name="item.value">
        <template #title> 
          <div style="font-size: 14px; text-align: center; line-height: 1.2; margin-top: 7px;">
            <div>{{ item.label }}</div>
            <div style="font-size: 12px;">({{ item.number }})</div>
          </div>
        </template>
      </van-tab>
    </van-tabs>
    <top-search @search="searchFunc" v-model="search.content" bgcolor="#fff">
      <top-picker :option="option.type" v-model="search.type"></top-picker>
    </top-search>
    <div class="top-picker">
      <top-picker :option="option.chargeStatus" v-model="search.chargeStatus"></top-picker>
      <top-picker :option="option.sort" v-model="search.sort"></top-picker>
    </div>
    <van-list class="page-content" v-model="page.loading" :finished="page.finished" finished-text="没有更多了" @load="getList">
      <div class="list-item" v-for="(item, index) in list" :key="index">
        <div class="list-group flex-row" style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
          <div class="flex-row">
            <img :src="item.icon" style="width: 0.6rem; height: 0.6rem; border-radius: 50%;"/>
            <span class="font-black" style="font-size: 14px; margin-left: 0.28rem;">{{ item.nick || '无昵称' }}</span>
          </div>
          <span class="font-gray" style="font-size: 14px;" @click="$copy(item.userId)">用户ID:{{ item.userId }}</span>
        </div>
        <div class="list-group">
          <div class="list-row">
            <div class="list-row" style="width: 50%;">
              <span class="label-text">订单编号</span>
              <span>{{ item.orderId }}</span>
            </div>
            <div class="list-row" style="width: 50%;">
              <span class="label-text">订单费用</span>
              <span class="font-warn">{{ item.realExpense || item.realExpense == 0 ? item.realExpense + '元' : $store.getters.dictTrans.order[item.orderStatus] }}</span>
            </div>
          </div>
          <div class="list-row">
            <div class="list-row" style="width: 50%;" @click="$copy(item.equipmentSn)">
              <span class="label-text">设备编号</span>
              <span>{{ item.equipmentSn }}</span>
            </div>
            <div class="list-row" style="width: 50%;" @click="$copy(item.chargerSn)">
              <span class="label-text">充电宝编号</span>
              <span>{{ item.chargerSn }}</span>
            </div>
          </div>
          <div class="list-row">
            <span class="label-text">租借地点</span>
            <span>{{ item.shopName }}({{ item.rentShopId }})</span>
          </div>
        </div>
        <div class="list-group">
          <div class="list-row">
            <span class="label-text">租借时间</span>
            <span>{{ item.rentTime }}</span>
          </div>
          <div class="list-row" v-if="item.returnTime">
            <span class="label-text">归还时间</span>
            <span>{{ item.returnTime }}</span>
          </div>
          <div class="list-row" v-if="item.payTime">
            <span class="label-text">付款时间</span>
            <span>{{ item.payTime }}</span>
          </div>
        </div>
        <div v-if="$store.getters.ifAdmin" class="list-group justify" style="padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 14px;">
          <div class="list-row">
            <span @click="zanting(item)" class="font-blue">{{ item.orderStatus == 4 ? '恢复计费' : '暂停计费' }}</span>
            <span @click="moneyDetail.showBlank(true, item.orderId)" class="font-blue">分成明细</span>
            <span @click="moneyDetail.showBlank(false, item.orderId)" class="font-blue">退款明细</span>
            <span @click="tuikuan.showBlank(item)" v-if="$store.getters.ifAdmin" class="font-blue">退款</span>
          </div>
        </div>
      </div>
    </van-list>

    <van-dialog v-model="tuikuan.show" title="退款" show-cancel-button @confirm="tuikuan.submit">
      <van-field v-model="tuikuan.money" placeholder="请输入" label="退款金额" style="margin: 0.1rem 0;"/>
    </van-dialog>

    <van-popup v-model="moneyDetail.show" position="bottom" :style="{ height: '100%' }">
      <div class="page">
        <van-nav-bar :title="moneyDetail.type ? '分成明细' : '退款明细'" left-arrow @click-left="moneyDetail.show = false"/>
        <div v-if="moneyDetail.type" class="page-content">
          <div class="list-item" v-for="(item, index) in moneyDetail.list" :key="index">
            <div class="list-group justify">
              <div class="list-row">
                <span class="label-text">名称</span>
                <span>{{ item.nick }}</span>
              </div>
              <div class="list-row">
                <span class="label-text">金额</span>
                <span>{{ item.incomeMoney }}元</span>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="page-content">
          <div class="list-item" v-for="(item, index) in moneyDetail.list" :key="index">
            <div class="list-group">
              <div class="list-row">
                <span class="label-text">名称</span>
                <span>{{ item.nick }}</span>
              </div>
              <div class="list-row">
                <span class="label-text">金额</span>
                <span>{{ item.incomeMoney }}元</span>
              </div>
              <div class="list-row">
                <span class="label-text">退款时间</span>
                <span>{{ item.createTime }}</span>
              </div>
            </div>
          </div>
        </div>

        <div style="margin: 1rem 16px 16px;">
          <van-button block type="info" @click="moneyDetail.show = false">关闭</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: {
        content: '',
        type: 0,
        orderStatus: 0,
        sort: 0,
        chargeStatus: 4
      },

      page: {
        page: 1,
        size: 10,
        loading: false,
        finished: false
      },

      list: [],

      option: {
        type: [
          { label: '订单编号', value: 0 },
          { label: '充电宝编号', value: 1 },
          { label: '机柜编号', value: 2 },
          { label: '手机号', value: 3 },
          { label: '信用订单号', value: 4 }
        ],
        orderStatus: [],
        chargeStatus: [
          { label: '全部订单', value: 4 },
          { label: '未付款', value: 0 },
          { label: '待支付', value: 1 },
          { label: '已付款', value: 2 },
          { label: '退款', value: 3 }
        ],
        sort: [
          { label: '租借时间', value: 0 },
          { label: '归还时间从后往前', value: 1 },
          { label: '归还时间从前往后', value: 2 },
          { label: '付款时间从后往前', value: 3 },
          { label: '付款时间从前往后', value: 4 }
        ]
      },

      tuikuan: {
        show: false,
        orderId: '',
        money: '',
        showBlank: (item) => {
          if (item.realExpense && item.realExpense > 0) {
            this.tuikuan.orderId = item.orderId;
            this.tuikuan.money = '';
            this.tuikuan.show = true;
          } else {
            this.$toast('该订单不支持退款！');
          }
        },
        submit: () => {
          if (this.tuikuan.money && !isNaN(this.tuikuan.money)) {
            this.$axios.post(`/api/borrow/refundOrderByPayOrderId/${ this.tuikuan.orderId }`, {
              query: { money: this.tuikuan.money }
            }).then(() => {
              this.$toast('退款成功');
              this.onSearch();
            });
          } else {
            this.$toast('请输入正确的金额');
          }
        }
      },

      moneyDetail: {
        show: false,
        type: false,
        list: [],
        showBlank: (type, orderId) => {
          let url = '/api/IncomeItemController/orderRefundItem';
          if (type) url = '/api/IncomeItemController/orderIncomeItem';
          this.$toast.loading({ mask: true, message: '加载中...', duration: 0 });
          this.$axios.get(url, { orderId }).then(res => {
            let list = res || [];
            if (list.length) {
              this.$toast.clear();
              this.moneyDetail.type = type || false;
              this.moneyDetail.list = list;
              this.moneyDetail.show = true;
            } else {
              this.$toast('尚未生成明细！');
            }
          }).catch(() => {
            this.$toast.clear();
          });
        }
      }
    };
  },
  methods: {
    getNumber() {
      this.setNumber();
      this.$axios.get('/api/orderFormController/manageOrderNum').then(res => {
        this.setNumber(res);
      });
    },
    setNumber(res) {
      res = res || {};
      let nav = JSON.parse(JSON.stringify( this.$store.state.dict.order ));
      nav.forEach((ele, index) => {
        ele.number = isNaN(res[index]) ? '...' : res[index];
      });
      this.option.orderStatus = nav;
    },
    getList() {
      let sPage = JSON.parse(JSON.stringify(this.page));
      let page = sPage.page, size = sPage.size;
      this.page.loading = true;
      
      let search = JSON.parse(JSON.stringify(this.search));
      let orderStatus = search.orderStatus, chargeStatus = search.chargeStatus == 4 ? null : search.chargeStatus;
      let sort = [ null, 'return_time desc', 'return_time asc', 'pay_time desc', 'pay_time asc' ][search.sort];
      let query = { page, size, orderStatus, chargeStatus, sort };
      query[['orderNum', 'chargerSn', 'terminalSn', 'phone', 'creditId'][search.type]] = search.content || null;

      this.$axios.get('/api/orderFormController/manageOrder', query).then(res => {
        if(search.orderStatus != this.search.orderStatus) return ;
        let json = res || {}; 
        let list = json.list || [];
        this.list.push( ...list );
        let finished = json.isLastPage ? true : false;
        this.page = { ...sPage, page: sPage.page + 1, loading: false, finished };
      }).catch(() => {
        this.page = { ...sPage, loading: false, finished: true };
      });
    },
    searchFunc() {
      this.page = { page: 1, size: 10, loading: false, finished: false };
      this.list = [];
      this.getList();
    },
    zanting(item) {
      if (item.orderStatus != 0 && item.orderStatus != 4) {
        this.$toast('该订单不支持暂停计费！');
        return ;
      }
      this.$dialog.confirm({ 
        message: `订单号${ item.orderId }，确定要对该订单${ item.orderStatus == 0 ? '暂停计费' : '恢复计费' }吗?`,       
      }).then(() => {
        this.$axios.post(`/api/orderFormController/stopOrder`, { 
          query: { orderId: item.orderId, type: item.orderStatus == 0 ? '1' : '2' } 
        }).then(() => {
          this.$toast(`${ item.orderStatus == 0 ? '暂停计费' : '恢复计费' }成功！`);
          this.searchFunc();
        });
      });
    },
    lookDetail() {

    }
  },
  computed: {
    showOrderStatus() {
      let getters = this.$store.getters;
      if (getters.ifAdmin || getters.ifDelay) {
        return this.option.orderStatus;
      } else if (getters.ifIntroducer) {
        return this.option.orderStatus.slice(0, 2);
      } else {
        return this.option.orderStatus.slice(0, 3);
      }
    }
  },
  mounted() { 
    this.getNumber();
  }
};
</script>

<style lang="less">
.Order {
}
</style>
